import React, {Component, PropTypes} from 'react'
import ReactHighcharts from 'react-highcharts'
require('highcharts-no-data-to-display')(ReactHighcharts.Highcharts)
require('highcharts-data')(ReactHighcharts.Highcharts)
import '../../../lib/styles/app.less'

export default class HighChartsChartComponent extends Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
  }
  shouldComponentUpdate(nextprops){
   return this.props.series!==nextprops.series||this.props.scales!=nextprops||
     this.props.isLoading!==nextprops.isLoading||this.props.needDateState!==nextprops.needDateState
  }


  render() {
    const chartConfig = {
      chart: {},
      title: {
        text: this.props.title,
        x: -20 //center
      },
      credits: {
        enabled: false
      },
      subtitle: {
        text: this.props.subtitle,
        x: -20
      },
      loading: {
        labelStyle: {
          color: 'white'
        },
        style: {
          backgroundColor: 'gray'
        }
      },
      xAxis: {
        categories: this.props.scales
      },
      yAxis: {
        title: {
          text: null
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '人'
      },
      legend: {
        layout: 'vertical',
        align: 'center',
        verticalAlign: 'bottom',
        borderWidth: 0
      },
      series: this.props.series
    }

    return (
      <div className="chart-wrap">
        <div className="chart-nav">
          {this.props.nextReport !== null &&
          <div className="chart-next" onClick={e=>this.props.handleNextReport(this.props.nextReport)}>＞</div>
          }
          {  this.props.prevReport!==null&&
          <div className="chart-pre" onClick={e=>this.props.handlePreReport(this.props.prevReport)}>＜</div>
          }
        </div>
        <ReactHighcharts className='chart-border' callback={this.afterRender } config={chartConfig}/>
      </div>
    )
  }

  afterRender = (chart)=> {
    const {isLoading, needDateState}=this.props
    if (isLoading) {

      if (needDateState) {
        chart.showNoData('请选择日期')
      } else {
        chart.showNoData(" ")
        chart.showLoading()
      }
    } else {
      chart.hideLoading()
      chart.showNoData("无数据")
    }
  }
}

